<template>
  <!-- 消毒管理 -->
  <view class="form-filling-page-box">
    <!-- 上面那一块的样式结束-->
    <!-- 表单开始 -->
    <Navbar navbarTitle="消毒管理"></Navbar>
    <view class="form-validation-box">
      <uni-forms ref="formValidation"
                 :modelValue="alignmentFormData"
                 validateTrigger="bind"
                 :rules="custRules"
                 label-position="top"
                 labelWidth="100px">
        <uni-forms-item label="所属养殖栏"
                        required
                        name="livestockPenArr">
          <uni-data-picker placeholder="请选择所属养殖栏"
                           ref="picker"
                           popup-title="请选择"
                           :localdata="dataTree"
                           v-model="alignmentFormData.livestockPenArr"
                           :map="{text:'name',value:'id'}"
                           @change="onchange">

          </uni-data-picker>
        </uni-forms-item>
        <uni-forms-item label="消毒方法"
                        required
                        name="disinfection">
          <uni-data-select placeholder="请选择消毒方法"
                           v-model="alignmentFormData.disinfection"
                           :localdata="$store.getters.getDictionaryItem('disinfect_type')"
                           :clear="false">
          </uni-data-select>
        </uni-forms-item>
        <uni-forms-item label="使用物料"
                        required
                        name="usingMaterials">
          <uni-easyinput v-model="alignmentFormData.usingMaterials"
                         placeholder="请输入使用物料" />
        </uni-forms-item>
        <uni-forms-item label="使用量"
                        required
                        name="dosage">
          <uni-easyinput v-model="alignmentFormData.dosage"
                         placeholder="请输入使用量" />
        </uni-forms-item>
        <uni-forms-item label="操作人员"
                        required
                        name="userName">
          <uni-easyinput v-model="alignmentFormData.userName"
                         placeholder="请输入操作人员" />
        </uni-forms-item>
        <uni-forms-item label="消毒时间"
                        required
                        name="disinfectTime">
          <uni-datetime-picker type="datetime"
                               :clear-icon="false"
                               placeholder="请选择消毒时间"
                               v-model="alignmentFormData.disinfectTime" />
        </uni-forms-item>
      </uni-forms>
    </view>
    <!-- 表单结束 -->
    <view class="button-assembly-box">
      <button @click="reset"
              class="button reset">重置</button>
      <button @click="submit"
              class="button notarize">确认</button>
    </view>
  </view>
</template>

<script>
import Navbar from '@/components/common/Navbar.vue'
export default {
  components: {
    Navbar
  },
  data () {
    return {
      dataTree: [],
      alignmentFormData: {
        livestockPenArr: '',
        baseInfoId: '',
        baseHutsId: '',
        baseHutsFenceId: '',
        disinfection: '',
        usingMaterials: '',
        dosage: '',
        userName: '',
        disinfectTime: '',
      },
      custRules: {
        // baseInfoId: {
        //   rules: [{
        //     required: true,
        //     errorMessage: '请选择所属基地',
        //   }]
        // },
        // baseHutsId: {
        //   rules: [{
        //     required: true,
        //     errorMessage: '请选择所属栏舍',
        //   }]
        // },
        livestockPenArr: {
          rules: [{
            required: true,
            errorMessage: '请选择所属养殖栏',
          }]
        },
        disinfection: {
          rules: [{
            required: true,
            errorMessage: '请选择消毒方法',
          }]
        },
        disinfectTime: {
          rules: [{
            required: true,
            errorMessage: '请选择消毒时间',
          }]
        },
        userName: {
          rules: [{
            required: true,
            errorMessage: '请输入操作人员',
          }]
        },
        dosage: {
          rules: [{
            required: true,
            errorMessage: '请输入使用量',
          }]
        },
        usingMaterials: {
          rules: [{
            required: true,
            errorMessage: '请输入使用物料',
          }]
        },
      }
    }
  },
  mounted () {
    this.getBreedingPen()
  },
  methods: {
    // 获取养殖栏等信息
    async getBreedingPen () {
      const res = await this.$api.breedingModuleServer.getGoatBaseList();
      if (res.code === 200) {
        this.dataTree = res.data
      }
    },
    // 当选择了养殖栏的时候
    onchange (e) {
      const arr = e.detail.value
      if (arr.length === 3) {
        this.alignmentFormData.baseInfoId = arr[0]
        this.alignmentFormData.baseHutsFenceId = arr[2]
        this.alignmentFormData.baseHutsId = arr[1]
        return
      }
      this.alignmentFormData.baseInfoId = ''
      this.alignmentFormData.baseHutsFenceId = ''
      this.alignmentFormData.baseHutsId = ''
      uni.showToast({
        icon: "error",
        title: '请选择三级的值'
      })
    },
    // 点击重置按钮
    reset () {
      setTimeout(() => {
        this.$refs.formValidation.clearValidate()
      }, 17)
    },
    // 点击确定按钮
    submit () {
      this.$refs['formValidation'].validate().then(async () => {
        const res = await this.$api.homeServer.getAppProductInitialResult(this.alignmentFormData);
        if (res.code !== '200') return
        if (!res.data.records || res.data.records.length === 0) {
          uni.showToast({
            title: '没有找到匹配的产品'
          })
          return
        }
        let data = JSON.stringify([...res.data.records]);
        uni.setStorageSync('matchedData', data);
        uni.navigateTo({
          url: '/pages/home/productScreening/matchingResult'
        })
      }).catch((err) => {
        uni.showToast({
          title: err[0].errorMessage,
          icon: 'error'
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.form-filling-page-box {
  // height: 100vh;
  width: 100vw;
  background: #fff;
  .button-assembly-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: calc(100vw - 64rpx);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20rpx 32rpx 30rpx;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 -4px 8px 0 rgba(0, 0, 0, 0.04), 0 0 1px 0 rgba(0, 0, 0, 0.04);

    .button {
      margin: 0;
      height: 80rpx;
      font-size: 28rpx;
      border-radius: 40rpx;
      background-color: #fff;
    }

    .reset {
      width: 224rpx;
      margin-right: 24rpx;
      border: 1rpx solid #e7e7e7;
    }

    .notarize {
      flex: 1;
      color: #fff;
      background: $uni-color-success;
    }

    .button::after {
      border: 0;
    }
  }

  .form-validation-box {
    padding: 56rpx 32rpx 140rpx;
    background-color: #fff;
    border-radius: 32rpx;
    z-index: 12;
    .title {
      display: block;
      color: #333;
      font-size: 28rpx;
      font-weight: 500;
      padding: 24rpx 0;
    }

    /deep/.uni-forms-item {
      margin-bottom: 40rpx;

      .uni-forms-item__content {
        position: relative;
        .uni-select,
        .input-value {
          background-color: #fff;
        }

        .unit {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          right: 32rpx;
          color: #333;
          font-size: 24rpx;
          font-weight: 400;
        }
      }

      .input-value-border,
      .uni-date-editor--x,
      .uni-date-x--border,
      .uni-date-x,
      .uni-date-single,
      .uni-select {
        border-radius: 45rpx !important;
        font-size: 28rpx !important;
        border-color: #e7e7e7;
        height: 78rpx;
      }

      .uni-easyinput__content {
        border-radius: 45rpx;
        border-color: #e7e7e7;

        .uni-icons {
          color: #e7e7e7 !important;
          display: none;
        }
      }

      .is-focused {
        border-color: #e7e7e7 !important;
      }

      .uni-forms-item__label {
        flex-direction: row-reverse;
        justify-content: flex-end !important;
        color: #333;
        font-size: 24rpx;
        height: 40rpx;
        font-weight: 400;
        padding-bottom: 20rpx;

        .is-required {
          margin: 4rpx 0 0 8rpx;
          color: red;
        }
      }
    }
  }
}
</style>